.frame{
    position: absolute;
    width: 400px;
    height: 400px;
    inset: 0;
    margin: auto;
    box-shadow: 1px 2px 10px rgba(0,0,0,0.3);
    border-radius: 2px;
    background: #46a6da;
}

.blobb{
    position: absolute;
    width: 90px;
    height: 90px;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    background: #fff;
    animation: blobby 5s ease-in-out infinite;
}

.blobb-ring{
    box-sizing: border-box;
    position: absolute;
    border: 3px solid #fff;
    width: 110px;
    height: 110px;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    animation: blobby-ring 5s ease-in-out infinite;
}

.octagon{
    position: absolute;
    width: 100px;
    height: 100px;
    inset: 0;
    margin: auto;
    fill: #fff;
    animation: octa 5s ease-in-out infinite;
}

.octa-sparkles{
    position: absolute;
    width: 200px;
    height: 200px;
    inset: 0;
    margin: auto;
    animation: octa-sparkle 5s ease-in-out infinite;

    .sparkle{
        position: absolute;
        top: 0;
        left: 98px;
        width: 4px;
        height: 200px;

        &::before, &::after{
            display: block;
            content: '';
            position: absolute;
            width: 4px;
            height: 25px;
            top: 0;
            left: 0;
            border-radius: 2px;
            background-color: #fff;
        }
        &::after{
            top: auto;
            bottom: 0;
        }
    }

    .s2{
        transform: rotate(45deg);
    }
    .s3{
        transform: rotate(90deg);
    }
    .s4{
        transform: rotate(135deg);
    }
}

.triangle{
    position: absolute;
    width: 106px;
    height: 90px;
    inset: 0;
    margin: auto;
    fill: #fff;
    animation: triangle 5s ease-in-out infinite;
}

.triangle-sparkles{
    position: absolute;
    width: 200px;
    height: 200px;
    inset: 0;
    margin: auto;
    animation: triangle-sparkle 5s ease-in-out infinite;
    .sparkle{
        position: absolute;
        top: 0;
        left: 98px;
        width: 4px;
        height: 200px;

        &::before{
            display: block;
            content: '';
            position: absolute;
            width: 4px;
            height: 25px;
            left: 0;
            top: 0;
            background-color: #fff;
            border-radius: 2px;
        }
    }
    .s1{
        top: 10px;
    }
    .s2{
        transform:translateY(10px) rotate(124deg);
    }
    .s3{
        transform:translateY(10px) rotate(237deg);
    }

}

@keyframes blobby {
    0%{
        transform: translate3d(0, -300px, 0) scaleY(1.2);
    }
    10%{
        transform: translate3d(0, 50px, 0) scaleY(0.8);
    }
    14%{
        transform: translate3d(0, -30px, 0) scaleY(1.1);
    }
    18%{
        transform: translate3d(0,10px,0) scaleY(0.9);
    }
    20%,22%{
        transform: translate3d(0,0,0) scaleY(1);
    }
    26%{
        transform: translate3d(0,0,0) scale(1.2);
    }
    32%,74%{
        transform: translate3d(0,0,0) scale(0);
    }
    80%{
        transform: translate3d(0,0,0) scale(1.2);
    }
    84%{
        transform: translate3d(0,0,0) scale(0.9);
    }
    86%,88%{
        transform: translate3d(0,0,0) scale(1);
    }
    92%{
        transform: translate3d(0,-30px, 0) scaleY(0.9);
    }
    100%{
        transform: translate3d(0,300px, 0) scaleY(1.2);
    }
}

@keyframes blobby-ring {
    0%, 74%{
        transform: translate3d(0,0,0) scale(0);
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    84%,100%{
        transform: translate3d(0,0,0) scale(1.4);
        opacity: 0;
    }
}

@keyframes octa {
    0%, 30%{
        transform: translate3d(0,0,0) rotate(22.5deg) scale(0);
    }
    36%{
        transform: translate3d(0,0,0) rotate(22.5deg) scale(1.2);
    }
    40%{
        transform: translate3d(0,0,0) rotate(22.5deg) scale(0.9);
    }
    42%, 44%{
        transform: translate3d(0,0,0) rotate(22.5deg) scale(1);
    }
    48%{
        transform: translate3d(0,0,0) rotate(22.5deg) scale(1.2);
    }
    54%, 100%{
        transform: translate3d(0,0,0) rotate(22.5deg) scale(0) ;
    }
}

@keyframes octa-sparkle {
    0%, 30%{
        transform: scale(0);
        opacity: 1;
    }
    36%{
        opacity: 1;
    }
    40%, 100%{
        transform: scale(1.4);
        opacity: 0;
    }

}

@keyframes triangle {
    0%,52%{
        transform: scale(0);
    }

    58%{
        transform: scale(1.2);
    }
    62%{
        transform: scale(0.9);
    }
    64%,66%{
        transform: scale(1);
    }
    70%{
        transform: scale(1.2);
    }
    76%,100%{
        transform: scale(0);
    }
}

@keyframes triangle-sparkle {
    0%,52%{
        transform: scale(0);
        opacity: 1;
    }
    58%{
        opacity: 1;
    }
    62%,100%{
        transform: scale(1.4);
        opacity: 0;
    }
}